<template>
    <!-- 续期工作列表模块-续期核保查询页面 -->
    <div class="fillcontain">
        <!-- 查询条件 -->
        <div class="fastQuery">
            <el-row>
                <el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
                <el-col :span="10"></el-col>
                <el-col :span="4" class="moreCondition">
                    <span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
                    <span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
                </el-col>
                <el-col :span="8"></el-col>
            </el-row>
        </div>
        <!-- 查询表单 -->
        <el-form v-show="isShow" :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px"
                 class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="保单号" prop="chdrnum">
                        <el-input clearable v-model="searchParams.chdrnum" placeholder="保单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="被保人" prop="insuredname">
                        <el-input clearable v-model="searchParams.insuredname" placeholder="被保人"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="案件状态" prop="flag01">
                        <el-select clearable v-model="searchParams.flag01" placeholder="案件状态" >
                            <el-option v-for="item in flag01s" :key="item.value" :label="item.option"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="检出人" prop="checkoutusrid">
                        <el-input clearable v-model="searchParams.checkoutusrid" placeholder="检出人" ></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" class="text_right">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>
        </el-form>

        <div class="contain">
            <!-- 查询结果列表 -->
            <div class="table_container">
                <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark"
                          highlight-current-row header-cell-class-name="table-header-class"
                          empty-text="无符合查询条件任务"
                          style="width:100%">
                    <el-table-column type="selection" :selectable="interceptVip"></el-table-column>
                    <el-table-column property="checkoutusrid" label="检出人" align='center' show-overflow-tooltip min-width="120"></el-table-column>
                    <el-table-column property="orgName" label="机构" align='center' show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="channel" label="渠道" align='center' show-overflow-tooltip min-width="50"></el-table-column>
                    <el-table-column property="chdrnum" label="保单号" align='center' show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="insuredname" label="被保险人" align='center'
                                     show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="mainContractName" label="主合同名称" align='center' show-overflow-tooltip min-width="120"></el-table-column>
                    <el-table-column property="archtypeName" label="案件类型" align='center' sortable show-overflow-tooltip min-width="120">
                    </el-table-column>
                    <el-table-column property="flag01Name" label="案件状态" align='center' sortable show-overflow-tooltip min-width="120">
                    </el-table-column>
                    <el-table-column property="dateup02" label="保单周年日" align='center' show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="rrtdat" label="Rerate-Date" align='center' show-overflow-tooltip min-width="110"></el-table-column>
                    <el-table-column property="trandate" label="抽档日" align='center' show-overflow-tooltip min-width="80"></el-table-column>
                    <el-table-column property="hisUser" label="历史处理人" align='center' show-overflow-tooltip min-width="120"></el-table-column>
                    <el-table-column property="hisDate" label="处理时间" align='center' show-overflow-tooltip min-width="160"></el-table-column>
                    <el-table-column property="remark" label="备注" align='center' show-overflow-tooltip min-width="80">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="showRemark(scope.row.taskno)" :disabled="!interceptVip(scope.row,scope.index)">{{ scope.row.remark?scope.row.remark:'备注' }}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column property="taskChange" label="任务流转" align='center' show-overflow-tooltip min-width="80">
                        <template slot-scope="scope">
                            <el-link class ="point"  type="primary"  @click="showChange(scope.row.taskno)" :disabled="!interceptVip(scope.row,scope.index)">任务流转</el-link>
                            <!-- <span class="operationIcon ml10" @click="showChange(scope.row.taskno)">
                                <i class="el-icon-paperclip"></i>
                            </span> -->   
                            
                        </template>
                    </el-table-column>
                <el-table-column
					min-width="80"
					label="影像信息"
					align='center'>
                    <template slot-scope="scope">
						<!-- <el-button type="text" size="small" icon="el-icon-camera" @click="showImage(scope.row)">影像信息</el-button>  -->
                        <span class="operationIcon ml10" @click="showImage(scope.row)" :style="{'pointer-events':!interceptVip(scope.row, scope.index) ? 'none': ''}">
                            <el-tooltip class="item" effect="light" content="影像信息" placement="top">
                                <i class="el-icon-camera"></i>
                            </el-tooltip>
                        </span>
                    </template>
                </el-table-column>
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="pagination">
                            <el-pagination
                                    background
                                    v-if='paginations.total > 0'
                                    :page-sizes="paginations.pageSizes"
                                    :page-size="paginations.pageSize"
                                    :layout="paginations.layout"
                                    :total="paginations.total"
                                    :current-page='paginations.pageIndex'
                                    @current-change='handleCurrentChange'
                                    @size-change='handleSizeChange'>
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 备注-->
        <remark-list  :business="'REAL'" :taskNo="remarkTaskNo" :drawer="showRemarkFlag" @close="hideRemark"></remark-list>
        <task-change-list  :business="'REAL'" :taskNo="changeTaskNo" :drawer="showChangeFlag" @close="hideChange"></task-change-list>
		
		<!--影像列表-->
		<cdfs-image-list :drawer="showImageFlag" :applnum="showImageApplnum" @close="hideImage"></cdfs-image-list>
		
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {page,queryUdwWorkPoolSelectFlag01} from "@/api/taskCenter/renewalTask";
    import { getNodeMap, getSsyOrgMap, warnOrTimeOutCount} from "@/api/taskCenter/taskCommon";
    import constant from '@/utils/constant';
    import taskConstants from '@/utils/taskConstants';
    import remarkList from "../../taskCenter/remarkList";
    import TaskChangeList from "../../taskCenter/taskChangeList";
	import cdfsImageList from "@/page/common/cdfsImageList";
	import TaskConstants,{call} from "@/api/taskManager/common";
    export default {
        components: {
            TaskChangeList,
            remarkList,
			cdfsImageList
        },
        data() {
            return {
                warnCount: 0,//预警个数
                ssyMap: {},//机构对象
                nodeMap: {},//节点对象
                flag01s:[],
                showNext:false,
                isShow: false,
                remarkTaskNo: "",
                showRemarkFlag: false,
                changeTaskNo: "",
                showChangeFlag: false,
                showAddRenewalFlag: false,
				showImageFlag:false,
				showImageApplnum:'',
                // 查询条件
                rules: {
                    chdrnum: [{
                        pattern: /^[0-9]*$/,  //正则
                        message: '保单号只能输入数字'
                    }],
                    acceptNo: [],
                    channel: [],
                    taskRank: [],
                    markNo: [],
                    institution: [],
                    acceptdate: [],
                    order: []
                },
                searchParams: {
                    chdrnum: "",//保单号
                    insuredname: "",//被保人姓名
                    checkoutusrid: "",//检出人
                    queryType: 'TODO',
                    flag01:'',
                    pageSize: "",
                    pageNumber: "",
                },
                orderList: constant.order,
                multipleTable: [],
                tableData: [],
                loading: false,
                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                }
            }
        },
		activated(){
		    document.onkeydown = (event)=>{
		        var e = event || window.event || arguments.callee.caller.arguments[0];
		        if (e && e.keyCode == 113) {
		            this.subGetList();
		        }
		    };
		}, 
        created() {
            // this.getList();
            this.nextNodes();
        },
        mounted() {
            getSsyOrgMap().then(data => this.ssyMap = data);
            getNodeMap().then(data => this.nodeMap = data);
            this.queryUdwWorkPoolSelectFlag01();
            // this.getList();
        },
        methods: {
			showImage(row) {
                // vip数据管控start
                if(row.taskno.indexOf("*") !== -1){
                    this.$message({
                        message: '该保单为vip数据,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
				this.showImageApplnum = row.caseno;
				this.showImageFlag = true;
			},
			hideImage() {
				this.showImageApplnum = "";
				this.showImageFlag = false;
			},
            getArchtypeName(value) {
                if ( taskConstants.archtype[value] ){
                    return  taskConstants.archtype[value];
                } else
                    return value;
            },
            getFlag01Name(value) {
                if (this.flag01s && this.flag01s.length>0 )
                  return  this.flag01s.filter(item => item.value == value)[0].option;
                else
                    return value;
            },
            getOrgName(value) {
                if (this.ssyMap && this.ssyMap[value] && this.ssyMap[value].sorgname)
                    return this.ssyMap[value].sorgname;
                else
                    return value;
            },
            getNodeName(value) {
                if (this.nodeMap && this.nodeMap["REAL" + "_"+ value] && this.nodeMap["REAL" + "_"+ value].content)
                    return this.nodeMap["REAL" + "_"+ value].content;
                else
                    return value;
            },
            showRemark(taskNo) {
                // vip数据管控start
                if(taskNo.indexOf("*") !== -1){
                    this.$message({
                        message: '该保单为vip数据,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
                this.remarkTaskNo = taskNo;
                this.showRemarkFlag = true;
            },
            showChange(taskNo) {
                // vip数据管控start
                if(taskNo.indexOf("*") !== -1){
                    this.$message({
                        message: '该保单为vip数据,暂无操作权限!',
                        type: 'error'
                    });
                    return false
                }
                // vip数据管控end
                this.changeTaskNo = taskNo;
                this.showChangeFlag = true;
            },
            hideRemark() {
                this.remarkTaskNo = "";
                this.showRemarkFlag = false;
            },
            hideChange() {
                this.changeTaskNo = '';
                this.showChangeFlag = false;
            },
            showorhide() {
                this.isShow = !this.isShow;
            },
            showAddRenewal() {
                this.showAddRenewalFlag = true;
            },
            hideAddRenewal() {
                this.showAddRenewalFlag = false;
            },
            // 查询列表
            getList() {
                //获取预警任务个数
                this.paginations.total = 0;
                this.tableData = [];
                 this.$store.dispatch('loading/CHANGE_LOADING',true)
                this.searchParams.pageNumber = this.paginations.pageIndex;
                this.searchParams.pageSize = this.paginations.pageSize;
                call(TaskConstants.apis.renewalQuery,this.searchParams,"POST").then(res => {
                    console.log('参数', this.searchParams);
                    console.log('结果', res);
                     this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if (res.resultCode == constant.SUCCESS && res.data && res.data.list.length) {
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                        this.tableData.forEach(item => {
                            item["orgName"] = this.getOrgName(item.organ);
                            item["nodeName"] = this.getNodeName(item.routeid);
                            item["archtypeName"] = this.getArchtypeName(item.archtype);
                            item["flag01Name"] = this.getFlag01Name(item.flag01);
                        })
                    }

                }).catch(err => {
                     this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            //案件状态查询
            queryUdwWorkPoolSelectFlag01(){
                queryUdwWorkPoolSelectFlag01().then(res => {
                    if (res.resultCode == constant.SUCCESS) {
                        this.flag01s = res.data;
                    } else {
                        this.$message.error(res.resultMsg);
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList();
            },
            // 根据条件查询列表
            subGetList() {
                this.paginations.pageIndex = 1;
                this.getList();
            },
            // 清除查询条件
            resetSearch() {
                this.searchParams.chdrnum = '';
                this.searchParams.flag01 = '';
                this.searchParams.checkoutusrid = '';
                this.searchParams.insuredname = '';
                this.$refs.multipleTable.clearSort();
            },
            // vip权限拦截
            interceptVip(row,index) {
                let rowStr = JSON.stringify(row);
                if (rowStr.indexOf("****") > -1) {
                    return false;
                }
                return true;
            },
        },
        watch: {
            ssyMap: function (newVal) {
                console.log(newVal);
                console.log(this.ssyMap);
                //重新渲染table
                this.tableData.forEach(item => {
                    item["orgName"] = this.getOrgName(item.organ);
                });
                this.tableData.push({});
                this.tableData.pop();
                console.log(this.tableData);
                console.log("重新渲染table");
            },
            nodeMap: function (newVal) {
                //重新渲染table
                this.tableData.forEach(item => {
                    item["nodeName"] = this.getNodeName(item.routeid);
                });
                this.tableData.push({});
                this.tableData.pop();
                console.log(this.tableData);
                console.log("重新渲染table");
            },
            flag01s: function (newVal) {
                //重新渲染table
                this.tableData.forEach(item => {
                    item["flag01Name"] = this.getFlag01Name(item.flag01);
                });
                this.tableData.push({});
                this.tableData.pop();
                console.log(this.tableData);
                console.log("重新渲染table");
            },
        },
        computed: {
            ...mapGetters(['tags']),
        },

    }
</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;

        .fastQuery {
            padding: 15px 20px 10px 20px;
            background: #fff;
            border-bottom: 1px solid #e1e1e1;

            .fastQuery_title {
                color: #666;
                padding: 6px 0px;
            }

            .fastQuery_item {
                margin: 0 10px;
            }

            .item_default {
                .el-button {
                    color: #409EFF !important;
                    border-color: #c6e2ff !important;
                    background-color: #ecf5ff !important;
                }

            }

            .moreCondition {
                color: #68a3fc;
                cursor: pointer;
                padding: 6px 0px;

                .el-icon-d-arrow-right {
                    transform: rotate(90deg);
                }

                .el-icon-d-arrow-left {
                    transform: rotate(-90deg);
                }
            }
        }
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;

        .svg-icon {
            font-size: 14px;
            fill: #68a3fc;
        }
    }

    .search_container {
        padding: 20px 20px 0 20px;
    }

    .el-dropdown {
        vertical-align: top;
    }

    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>



